<template>
    <div class="my-home-div">
        <div class="my-home-div-line row">
            <div class="col">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-a-icon_team_teamdata" />
                </svg>
                {{ getuser?.ID === user?.ID ? '我的' : '' }}练习数据
                <el-tooltip effect="dark" content="日常练习的数据，不包括比赛数据" placement="top">
                    <span size="small" class="circle">?
                    </span>
                </el-tooltip>
            </div>
        </div>
        <el-row class="f655">
            <el-col :span="12" class=" p-1">
                <div class="my-home-div cu"
                    @click="teamid ? router.push(`/team/${teamid}/teamdata/questiondata?userid=${getuser?.ID}`) : ''"
                    :style="{ marginBottom: 0 }">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_personal_pingcetijiaotimushu"></use>
                    </svg>
                    <div>
                        评测提交题目数
                    </div>
                    <h2>
                        <MynumberVue :num="teamdata?.distinctquestionid"></MynumberVue>
                    </h2>
                </div>
            </el-col>
            <el-col :span="12" class=" p-1">
                <div class="my-home-div ml-6 cu"
                    @click="teamid ? router.push(`/team/${teamid}/teamdata/questiondata?userid=${getuser?.ID}`) : ''"
                    :style="{ marginBottom: 0 }">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_personal_pingcetijiaocishu"></use>
                    </svg>
                    <div>
                        评测提交次数
                    </div>
                    <h2>
                        <MynumberVue :num="teamdata?.countlength"></MynumberVue>
                    </h2>
                </div>
            </el-col>
            <el-col :span="12" class=" p-1">
                <div class="my-home-div cu"
                    @click="teamid ? router.push(`/team/${teamid}/teamdata/questiondata?userid=${getuser?.ID}`) : ''"
                    :style="{ marginBottom: 0 }">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_personal_ACtijiaocishu"></use>
                    </svg>
                    <div>
                        全AC题目数
                    </div>
                    <h2>
                        <MynumberVue :num="teamdata?.count"></MynumberVue>
                    </h2>
                </div>
            </el-col>
            <el-col :span="12" class=" p-1">
                <div class="my-home-div cu"
                    @click="teamid ? router.push(`/team/${teamid}/teamdata/questiondata?userid=${getuser?.ID}`) : ''"
                    :style="{ marginBottom: 0 }">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_personal_ACceshidianshu"></use>
                    </svg>
                    <div>
                        AC测试点数
                    </div>
                    <h2>
                        <MynumberVue :num="teamdata?.resultdataarrlength"></MynumberVue>
                    </h2>
                </div>
            </el-col>
            <el-col :span="24" class="p-1 my-home-div   " v-if="!isshow"
                :style="{ height: '340px', padding: '12px', backgroundColor: '#fff', }">
                <header class="chartVue">
                    <header>全AC题目数</header>
                    <chartVue :color="data3.length ? data3.map(e => e.color) : color" :data="data3" :height="270">
                    </chartVue>
                </header>
            </el-col>
            <el-col :span="24" class="p-1 my-home-div  " v-if="!isshow"
                :style="{ height: '340px', padding: '12px', backgroundColor: '#fff', }">
                <header class="chartVue">
                    <header>评测时间分布</header>
                    <chart2Vue :data="data7" v-if="data7.length" :height="270"></chart2Vue>
                </header>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup >
import { computed, onMounted, ref, watch } from 'vue';
import { useStore } from 'vuex';
import { Storekey } from '../../../interface';
import chartVue from '../../../components/antv/chart.vue'
import chart2Vue from '../../../components/antv/chart2.vue'
import { asyncteamuserquestion } from '../../../api';
import MynumberVue from "../../../components/animejs/mynumber.vue"
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import { useRouter } from 'vue-router';
const p = defineProps<{ teamid?: number | false, teamdata: any, isshow?: boolean, getuser?: Studycodemodel.Iuser }>()
const store = useStore(Storekey)
const user = computed(() => {
    return store.state.user
})

const getlabel = computed(() => {
    return store.state.label?.rows || []
})

const router = useRouter()

watch(() => p.getuser, () => {
    startchar()
})

const data3 = ref<{ name: string, count: number, color: string }[]>([])
const data7 = ref<{ name: string, count: number }[]>([])
const color = ['#B83914', '#CF4017', '#EC4313', '#EB6C47', '#EE8263', '#FF8461', '#FF9C80', '#FFB099', '#FFC3B2', '#FFD7CC', '#FFEBE5']

onMounted(() => {
    startchar()
})

async function startchar() {
    if (p.getuser?.ID && p.teamid) {
        try {
            const t = await asyncteamuserquestion({
                teamid: p.teamid,
                todate: new Date,
                formdate: Date.now() - 1000 * 60 * 60 * 24 * 365 * 10,
                userid: p.getuser?.ID
            })
            data3.value = t.AClabel.sort((a, b) => b.count - a.count).map<{ name: string; count: number, color: string }>((e, k) => {
                return {
                    name: getlabel.value.find(t => t.ID === e.labelid)?.name as string,
                    count: e.count,
                    color: color[k] ? color[k] : '#D9D9D9'
                }
            })
            data7.value = Array.from({ length: 6 }).map((v, k) => {
                const date = [k * 4, k * 4 + 1, k * 4 + 2, k * 4 + 3]
                const z = t.groupkuserquestion.filter(f => date.includes(Number(f.hover))).map(e => e.count).reduce((a = 0, b = 0) => {
                    return a + b
                }, 0)
                return {
                    name: date[0] + '-' + (date[3] + 1) + '时',
                    count: z
                }
            })
        } catch (e) {

        }
    }
}
</script>

<style scoped>
.f655 .my-home-div {
    height: 228px;
    background-color: #FCFCFC;
    text-align: center;
    padding-top: 24px;
    transition: all 0.3s;
}

.f655 .my-home-div:hover {
    border: 1px solid rgba(117, 117, 117, 0.4);
    /* Depth 16 */
    box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
}

.f655 .my-home-div .icon {
    width: 64px;
    height: 64px;
}

.f655 .my-home-div div {
    margin-top: 12px;
    margin-bottom: 36px;
}


.circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 16px;
    background-color: #000;
    color: #fff;
    border-radius: 50%;
    width: 16px;
    font-size: 12px;
    font-weight: 400;
    transform: translateY(-1px);
}

.chartVue {
    height: 312px;
    padding-left: 6px;
    padding-right: 6px;
}



h2 {
    font-weight: 700;
    font-size: 36px;
    margin-bottom: 0;
}
</style>